<template>
  <div 
    class="x-bar" 
    :id="chartId"
    :option='option'>
  </div>
</template>

<script>
import { formatNum } from '../../../util/tool'
export default {
  props : {
    chartId : {
      type : String,
    },
    title : {
      type : String,
    },
    options : {
      type : Object,
    }
  },
  data() {
    return {
      chart: '',
      option : {
        tooltip: {
          trigger: 'item',
          formatter : (param) => {
            let arr = [
                param.name +':',
                formatNum(param.value),
                '('+param.percent+')'
            ];
            return arr.join('\n');
          }
        },
        legend: {
          x: 'left',
          textStyle : {
            color:'#fff',
            fontSize: '10'
          },
          bottom : 0,
          left : 5,
          itemWidth : 16,
          itemHeight : 8,
          data: ['XXXXXXXXXXXXXXXXXXXX','XXXXXXXXXXXXXXXXXXX','XXXXXXXXXXXXXXXXXX','xxxxxx','xxxxx','xxxxx']
        },
        series: [
          {
            type:'pie',
            center : ['50%','40%'],
            radius : ['0%','48%'],
            startAngle : 160,
            minAngle : 15,
            avoidLabelOverlap: true,
            itemStyle : {
              emphasis: {
                shadowBlur: 14,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                formatter : function(param){
                  let arr = [
                    '{b|' + param.name + '}',
                    '{c|' + formatNum(param.value) + '}',
                  ];
                  return arr.join('\n');
                },
                backgroundColor: '#13266d',
                borderColor: '#0d68af',
                borderWidth: 1,
                borderRadius: 4,
                padding : [4,0,4,0],
                rich: {
                  b: {
                    fontSize: 10,
                    color :'#49d9fe',
                    align :'center',
                    lineHeight:10
                  },
                  c : {
                    color : '#ff9600',
                    fontSize : 10,
                    align :'center'
                  }
                }
              }
            },
            labelLine: {
              length : 10,
              length2 : 10,
              lineStyle : {
                color: '#fff'
              }
            },
            data: [
              { name:'XXXXXXXXXXXXXXXXXXXX', value: 400 },
              { name:'XXXXXXXXXXXXXXXXXXX', value: 300 },
              { name:'XXXXXXXXXXXXXXXXXX', value: 200 },
              { name:'xxxxxx', value: 100 },
              { name:'xxxxx', value: 80 },
              { name:'xxxx', value: 20 }
            ]
          }
        ],
        color : ['#f211eb','#fef50d','#00e6ff','#38c800','#ff7e00','#1d42ff','#f2f50d']
      }
    }
  },
  methods : {
    init() {
      this.chart = this.$echarts.init(document.getElementById(this.chartId));
      this.chart.setOption(this.option);
      window.addEventListener("resize", this.chart.resize);
    }
  },
  mounted(){
    this.init();
  }
}
</script>

<style lang="scss" scoped> 
  .x-bar {
    width: 100%;
    height: 100%;
  }
</style>

